import React, { useMemo, FunctionComponent } from 'react';
import { Button, Divider, Drawer } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { useInbiz } from '../../../../store/hooks/useInbiz';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useViewType } from '../../../../store/hooks/useViewType';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import Detail from './Detail';
import { TextWidget } from '@inbiz/react';
import './index.less'
interface Props {
  layout?: 'inside' | 'outside';
  tagID?: string;
  onClose?: () => void;
}

// 高级搜索内容【表单+搜索标签】
const AdvancedSearch: FunctionComponent<Props> = (props) => {
  const { layout = 'outside', onOpenAdSearch } = props;
  const { selectShowTab, switchAdSearch } = useSearchUIState();
  const updateState = useSearchUIDispatch();
  
  const onCloseAdSearch = () => {
    updateState({
      switchAdSearch: false,
    });
  };
  const viewType = useViewType();
  const advancedComponent = useMemo(() => {
    // if (viewType === 'largePanelView') {
    //     if (switchAdSearch) {
    //         return <Detail layout={layout} onClose={onCloseAdSearch}  />;
    //     }
    //     return (
    //         <div className={`advanced-search-open ${selectShowTab?.advancedSearchStyle == 'style2' ? 'bottom' : ''}`}>
    //             <Button onClick={onOpenAdSearch} type="link" className='advanced-search-open-btn'>高级搜索</Button>
    //         </div>
    //     );
    // }
    return (
      <div
        className={`advanced-search-open ${
          selectShowTab?.advancedSearchStyle == 'style2' ? 'bottom' : ''
        }`}
        style={{width: 73}}
      >
        
        <Drawer
          height={580}
          closable={false}
          placement="top"
          className="inbiz-search-engine-drawer"
          onClose={onCloseAdSearch}
          visible={switchAdSearch}
          destroyOnClose
          title={
            <InbizIcon
              type="icon-ic-close"
              className="drawer-ad-search-close"
              onClick={onCloseAdSearch}
            />
          }
          zIndex={20}
          push
        >
          <Detail layout={layout} onClose={onCloseAdSearch} />
        </Drawer>
      </div>
    );
  }, [
    viewType,
    switchAdSearch,
    onCloseAdSearch,
    onOpenAdSearch,
    selectShowTab?.advancedSearchStyle,
  ]);
  const advancedSearchDisplay=useMemo(()=>{
    return (
      <div className="advanced-search-container">
      {layout === 'outside' && (
        <Divider className={`advanced-search-container-title`}>
          <TextWidget>SearchEngine.advancedSearch</TextWidget>
        </Divider>
      )}
      <Detail layout={layout} />
    </div>
    )
  },[viewType,
    switchAdSearch,
    onCloseAdSearch,
    onOpenAdSearch,
    selectShowTab?.advancedSearchStyle])

  return selectShowTab?.advancedSearchStyle === 'style1' ? (
    advancedSearchDisplay
  ) : (
    advancedComponent
  );
};

export default AdvancedSearch;
